<template>
  <div class="admin-dept-container">
    <!-- 主体内容 -->
    <main class="content-wrapper">
      <!-- 返回按钮 -->
      <div class="back-section">
        <router-link to="/adminDeptPage" class="back-link">
          <span class="back-icon">←</span>
          <span>返回</span>
        </router-link>
      </div>
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>行政机构设置</h1>
        <p>山河大学行政部门组织结构图 -- 仅娱乐，非真实</p>
      </div>
      
      <!-- 部门分类塔图 -->
      <div class="department-tower">
        <!-- 第一类：校级核心决策与统筹部门 -->
        <div class="department-category">
          <div class="category-header">
            <div class="category-title">校级核心决策与统筹部门</div>
            <div class="category-description">
              直接对接学校领导层，负责全校重大事项的决策、统筹和协调，是行政体系的 "中枢"。
            </div>
          </div>
          
          <div class="department-items">
            <div class="dept-item" v-for="dept in coreDepartments" :key="dept.name" @click="showDeptDetail(dept)">
              <div class="dept-name">{{ dept.name }}</div>
              <div class="dept-desc">{{ dept.description }}</div>
            </div>
          </div>
        </div>
        
        <!-- 第二类：教学与人才培养相关部门 -->
        <div class="department-category">
          <div class="category-header">
            <div class="category-title">教学与人才培养相关部门</div>
            <div class="category-description">
              聚焦本科、研究生等各层次人才培养的全流程管理，保障教学质量和教学秩序。
            </div>
          </div>
          
          <div class="department-items">
            <div class="dept-item" v-for="dept in teachingDepartments" :key="dept.name" @click="showDeptDetail(dept)">
              <div class="dept-name">{{ dept.name }}</div>
              <div class="dept-desc">{{ dept.description }}</div>
            </div>
          </div>
        </div>
        
        <!-- 第三类：科研与学术管理相关部门 -->
        <div class="department-category">
          <div class="category-header">
            <div class="category-title">科研与学术管理相关部门</div>
            <div class="category-description">
              支撑学校科研创新、学术交流和科研成果转化，服务科研人员开展工作。
            </div>
          </div>
          
          <div class="department-items">
            <div class="dept-item" v-for="dept in researchDepartments" :key="dept.name" @click="showDeptDetail(dept)">
              <div class="dept-name">{{ dept.name }}</div>
              <div class="dept-desc">{{ dept.description }}</div>
            </div>
          </div>
        </div>
        
        <!-- 第四类：后勤保障与校园管理部门 -->
        <div class="department-category">
          <div class="category-header">
            <div class="category-title">后勤保障与校园管理部门</div>
            <div class="category-description">
              负责校园基础设施、后勤服务、安全保障等，为教学科研提供基础支撑。
            </div>
          </div>
          
          <div class="department-items">
            <div class="dept-item" v-for="dept in logisticsDepartments" :key="dept.name" @click="showDeptDetail(dept)">
              <div class="dept-name">{{ dept.name }}</div>
              <div class="dept-desc">{{ dept.description }}</div>
            </div>
          </div>
        </div>
        
        <!-- 第五类：对外合作与交流部门 -->
        <div class="department-category">
          <div class="category-header">
            <div class="category-title">对外合作与交流部门</div>
            <div class="category-description">
              负责学校与外部机构的合作、国际交流及校友资源对接。
            </div>
          </div>
          
          <div class="department-items">
            <div class="dept-item" v-for="dept in externalDepartments" :key="dept.name" @click="showDeptDetail(dept)">
              <div class="dept-name">{{ dept.name }}</div>
              <div class="dept-desc">{{ dept.description }}</div>
            </div>
          </div>
        </div>
        
        <!-- 第六类：监督与审计及其他专项部门 -->
        <div class="department-category">
          <div class="category-header">
            <div class="category-title">监督与审计及其他专项部门</div>
            <div class="category-description">
              负责学校行政行为的监督、审计，以及各类专项管理工作。
            </div>
          </div>
          
          <div class="department-items">
            <div class="dept-item" v-for="dept in supervisionDepartments" :key="dept.name" @click="showDeptDetail(dept)">
              <div class="dept-name">{{ dept.name }}</div>
              <div class="dept-desc">{{ dept.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 校级核心决策与统筹部门
const coreDepartments = ref([
  {
    name: '校长办公室（校办）',
    description: '核心综合部门，负责校长办公会组织、公文流转、对外联络、校园综合治理、重要活动统筹等，是学校行政事务的 "总协调器"。'
  },
  {
    name: '党委办公室（党办）',
    description: '与校办常合署办公（简称 "两办"），负责党委会议组织、党建工作统筹、意识形态、保密工作、统战工作等党务核心事务。'
  },
  {
    name: '发展规划处',
    description: '制定学校中长期发展规划、学科建设规划、校园建设规划，统筹学科评估、院校设置等重大发展事项。'
  },
  {
    name: '人事处',
    description: '负责教职工招聘、薪酬福利、职称评审、岗位设置、人事档案管理、师资培训与发展等师资队伍建设工作。'
  },
  {
    name: '财务处',
    description: '统筹学校经费管理，包括预算编制、经费核算、收支管理、财务审计对接、学费收缴、科研经费管理等。'
  }
]);

// 教学与人才培养相关部门
const teachingDepartments = ref([
  {
    name: '教务处',
    description: '核心教学管理部门，负责专业设置、课程建设、教学计划制定、学籍管理、考试组织、教材管理、教学质量监控等。'
  },
  {
    name: '研究生院',
    description: '统筹研究生培养工作，包括招生录取、培养方案制定、学位授予、导师队伍建设、研究生学籍与就业管理等。'
  },
  {
    name: '学生工作处（学工处）',
    description: '负责本科生思想政治教育、日常管理、奖助学金评定、学生奖惩、心理健康教育、就业指导与服务等。'
  },
  {
    name: '招生办公室',
    description: '统筹各类招生工作，包括本科招生、研究生招生、专项招生（如强基计划、艺术招生）的政策制定、宣传录取等。'
  },
  {
    name: '继续教育学院 / 成人教育学院',
    description: '负责非全日制学历教育（如成人本科、专升本）、非学历培训（如职业技能培训、干部培训）等社会教育服务。'
  }
]);

// 科研与学术管理相关部门
const researchDepartments = ref([
  {
    name: '科学技术处（科研处）',
    description: '统筹自然科学类科研管理，包括科研项目申报、经费管理、成果鉴定与转化、科研平台（实验室、研究院）建设、学术会议组织等。'
  },
  {
    name: '社会科学处',
    description: '专门负责人文社会科学类科研管理，职能与科研处对应，针对社科类项目、成果的特点开展工作。'
  },
  {
    name: '学术委员会办公室',
    description: '负责学术委员会的组织协调，处理学术评价、学术规范、学术不端调查等学术事务，保障学术自治。'
  },
  {
    name: '知识产权办公室',
    description: '负责学校科研成果的知识产权保护（如专利申请、商标注册）、成果转化中的法律对接、技术合同管理等。'
  },
  {
    name: '重点实验室 / 工程中心管理办公室',
    description: '统筹校级及以上科研平台（如国家重点实验室、省部级工程中心）的日常运营、考核评估等。'
  }
]);

// 后勤保障与校园管理部门
const logisticsDepartments = ref([
  {
    name: '后勤管理处（后勤集团）',
    description: '统筹后勤服务，包括校园绿化、环境卫生、宿舍管理、食堂运营、水电维修、物业管理等。'
  },
  {
    name: '保卫处（安全管理处）',
    description: '负责校园安全保卫，包括治安管理、消防管理、交通安全、突发事件处置、校园门禁管理等。'
  },
  {
    name: '资产管理处',
    description: '负责学校固定资产管理，包括教学科研设备采购、资产登记与盘点、设备维护与处置、校产租赁管理等。'
  },
  {
    name: '基建处',
    description: '负责校园新建工程、改扩建工程的规划、招标、施工管理、竣工验收等基础设施建设工作。'
  },
  {
    name: '信息化建设与管理处（信息中心）',
    description: '统筹校园信息化建设，包括校园网运维、教学科研系统（如教务系统、科研平台）开发与维护、数据安全管理等。'
  }
]);

// 对外合作与交流部门
const externalDepartments = ref([
  {
    name: '国际合作与交流处（国际处）',
    description: '统筹国际交流合作，包括海外院校合作、国际学生招生与管理、教职工出国交流、国际会议举办、中外合作办学项目管理等。'
  },
  {
    name: '校友工作办公室（校友总会）',
    description: '负责校友联络、校友组织建设、校友活动举办、校友捐赠对接等，整合校友资源服务学校发展。'
  },
  {
    name: '校企合作办公室 / 社会服务处',
    description: '负责与企业、地方政府的合作对接，推动产学研融合、科研成果转化、共建实习基地等社会服务工作。'
  }
]);

// 监督与审计及其他专项部门
const supervisionDepartments = ref([
  {
    name: '审计处',
    description: '对学校财务收支、科研经费使用、基建工程、领导干部经济责任等进行审计监督，保障资金合规使用。'
  },
  {
    name: '监察处 / 纪委办公室',
    description: '负责学校党风廉政建设、纪律监督、违纪违法案件查处等监督执纪工作。'
  },
  {
    name: '离退休工作处',
    description: '负责离退休教职工的管理与服务，包括养老金发放、医疗保障、文体活动组织等。'
  },
  {
    name: '档案馆',
    description: '负责学校各类档案（如文书档案、学籍档案、科研档案、基建档案）的收集、整理、保管与查阅服务。'
  },
  {
    name: '图书馆',
    description: '虽常归为 "教学辅助机构"，但承担公共服务职能，负责文献资源采购、借阅服务、数字图书馆建设、学术信息咨询等。'
  }
]);

// 显示部门详情
const showDeptDetail = (department) => {
  router.push({ 
    path: '/adminDeptDetail', 
    query: { 
      name: department.name, 
      description: department.description 
    } 
  });
};
</script>

<style scoped>
/* 主容器样式 */
.admin-dept-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 内容区域样式 */
.content-wrapper {
  flex: 1;
  padding: 30px 20px;
}

/* 页面标题样式 */
.page-header {
  text-align: center;
}

.page-header h1 {
  font-size: 36px;
  color: #2c3e50;
  margin-bottom: 15px;
  font-weight: 700;
}

.page-header p {
  font-size: 18px;
  color: #7f8c8d;
}

/* 部门塔图容器 */
.department-tower {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 部门类别样式 */
.department-category {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.department-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* 类别头部样式 */
.category-header {
  text-align: center;
  margin-bottom: 30px;
}

.category-title {
  font-size: 24px;
  color: #1a5e95;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.category-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: #1a5e95;
  border-radius: 3px;
}

.category-description {
  font-size: 16px;
  color: #7f8c8d;
  line-height: 1.6;
  margin-top: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 部门项列表样式 */
.department-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* 部门项样式 */
.dept-item {
  background-color: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dept-item:hover {
  border-color: #1a5e95;
  background-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(26, 94, 149, 0.15);
}

.dept-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #1a5e95;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dept-item:hover::before {
  opacity: 1;
}

.dept-name {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
  padding-left: 10px;
}

.dept-desc {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.6;
  padding-left: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .department-items {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    padding: 70px 15px 30px;
  }
  
  .page-header h1 {
    font-size: 28px;
  }
  
  .page-header p {
    font-size: 16px;
  }
  
  .department-category {
    padding: 20px 15px;
  }
  
  .category-title {
    font-size: 20px;
  }
  
  .category-description {
    font-size: 14px;
  }
  
  .department-items {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .dept-item {
    padding: 15px;
  }
  
  .dept-name {
    font-size: 16px;
  }
  
  .dept-desc {
    font-size: 13px;
  }
}
</style>